<template>
  <div class="login-bg">
    <div class="layout-btn">
      <el-dropdown @command="handleUserCommand" class="no-hover-border">
        <span class="el-dropdown-link" style="display: flex; align-items: center; cursor: pointer; outline: none; box-shadow: none;">
          <img src="@/assets/images/user.png" alt="" style="width: 28px; height: 28px; margin-right: 8px;" />
          <span>{{userName}}</span>
          <el-icon style="margin-left: 4px;"><i class="el-icon-arrow-down"></i></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout" @click="handleLayout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="login-container">
      <div class="login-card">
        <!-- <img src="@/assets/images/login-title.png" alt="logo" class="login-logo" /> -->
        <div style="font-size: 50px; margin-bottom: 50px; color: #fff">多版本语言多页文稿校对检测系统</div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 20px;margin-top: 30px;">
        <div class="select-box" @click="goUpload()">
          <el-icon style="font-size: 50px;margin-bottom: 20px;"><DocumentCopy /></el-icon>
          <p>文稿比对</p>
        </div>
        <div class="select-box" @click="goList()" >
          <el-icon style="font-size: 50px;margin-bottom: 20px;"><Tickets /></el-icon>
          <p>比对列表</p>
        </div>
      </div>
      </div>
    </div>
    <UploadModal ref="uploadModal" />
  </div>
</template>

<script setup>
import { User } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import UploadModal from '@/components/UploadModal.vue'

const router = useRouter()
const dialogVisible = ref(false)
const uploadBookVisible = ref(false)
const uploadPDFVisible = ref(false)
const uploadModal = ref(null)
const userName = ref('');

onMounted(() => {
  const info = JSON.parse(localStorage.getItem('userInfo'));
  userName.value = info.username;
})

const goList = () => {
  router.push({ name:'List' })
}

const goUpload = () =>{
  uploadModal.value.openModal();
}

const handleLayout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  router.push({ name:'Login' });
}
</script>

<style scoped>
.login-logo {
  width: 410px;
  height: 30px;
  margin-bottom: 40px;
}
.login-bg {
  height: 100%;
  width: 100%;
  background-color: #131218;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-btn {
  position: fixed;
  top: 20px;
  right: 20px;
}
.login-container {
  width: 1280px;
  height: 675px;
  background: url('@/assets/images/login-bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 894px;
  height: 660px;
  background-color: #2D2F37;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  align-items: center;     /* 水平居中内容 */
}
.select-box{
  flex: 1;
  margin: 0 40px;
  padding: 65px;
  border: 1px solid #409BFF;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  border: 1px dashed #409BFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #409BFF;
}
</style>